<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.7/vue.min.js"></script>
  <style>
    .light {
      background: red;
      color: #fff;
    }
  </style>
</head>

<body>
  <div id="app">
    <input type="text" v-model="key" />
    <table border="1" cellspacing="0" cellpadding="10">
      <thead>
        <th
          v-for="title in gridColumns"
          @click="toggleStatus(title)"
          :class="{ light: whichThLight === title }"
          :key="title"
        >
          {{ title | toUpperCase2 }}
          {{ (title === 'name' ? leftArrowDirection : rightArrowDirection ) ? '⬆️' : '⬇️' }}
        </th>
      </thead>
      <tbody>
        <tr v-for="item in data" :key="item.name">
          <td>{{ item.name }}</td>
          <td>{{ item.power }}</td>
        </tr>
      </tbody>
    </table>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        key: '',
        whichThLight: '',
        leftArrowDirection: false, // 向上
        rightArrowDirection: true, // 向上
        gridColumns: ['name', 'power'],
        gridData: [
          { name: 'Chuck Norris', power: Infinity },
          { name: 'Bruce Lee', power: 9000 },
          { name: 'Jackie Chan', power: 7000 },
          { name: 'Jet Li', power: 8000 },
        ],
      },

      computed: {
        newGridColumns1() {
          this.gridColumns = this.gridColumns.map(str => {
            return str.charAt(0).toUpperCase() + str.slice(1)
          })
        },
        filterData() {
          const currentSortRule = 'name'
          const leftArrowDirection = this.leftArrowDirection
          return this.gridData.slice().sort((a, b) => {
            if (a.name > b.name) {
              return leftArrowDirection ? 1 : -1
            } else if (a.name === b.name) {
              return 0
            } else {
              return leftArrowDirection ? -1 : 1
            }
          })
        },

        filterData2() {
          const currentSortRule = 'power'
          const rightArrowDirection = this.rightArrowDirection
          return this.gridData.slice().sort((a, b) => {
            if (a.power > b.power) {
              return rightArrowDirection ? 1 : -1
            } else if (a.power === b.power) {
              return 0
            } else {
              return rightArrowDirection ? -1 : 1
            }
          })
        },

        data() {
          const key = this.key.toLowerCase()
          const data = this.gridData.filter(item => {
            return item.name.toLowerCase().includes(key) || item.power.toString().includes(key)
          })

          let currentSortRule = ''
          let arrowDirection = ''

          const whichThLight = this.whichThLight
          if (whichThLight === '') {
            return data
          } else if (whichThLight === 'name') {
            currentSortRule = 'name'
            arrowDirection = this.leftArrowDirection
          } else if (whichThLight === 'power') {
            currentSortRule = 'power'
            arrowDirection = this.rightArrowDirection
          }

          return data.slice().sort((a, b) => {
            if (a[currentSortRule] > b[currentSortRule]) {
              return arrowDirection ? 1 : -1
            } else if (a[currentSortRule] === b[currentSortRule]) {
              return 0
            } else {
              return arrowDirection ? -1 : 1
            }
          })
        },

        x() {
          const whichThLight = this.whichThLight
          if (whichThLight === '') {
            return this.gridData
          } else if (whichThLight === 'name') {
            return this.filterData
          } else {
            return this.filterData2
          }
        },
      },
      filters: {
        toUpperCase2(str) {
          return str.charAt(0).toUpperCase() + str.slice(1)
        },
      },

      methods: {
        toUpperCase3(str) {
          return str.charAt(0).toUpperCase() + str.slice(1)
        },

        toggleStatus(title) {
          this.whichThLight = title
          if (title === 'name') {
            this.leftArrowDirection = !this.leftArrowDirection
          } else {
            this.rightArrowDirection = !this.rightArrowDirection
          }
        },
      },
    })
  </script>
</body>

</html>
